<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>智能检索统计系统--项目分布模块</title>
	<!--公用样式-->
	<link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
	<link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/supplier/common/css/style.css"/>
	<!--Layui-->
	<link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
	<!--extended-->
	<link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/extended.css"/>
	<!--公用样式JS-->
	<script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/comment.js"></script>
	<script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.js" charset="utf-8"></script>
	<meta charset="utf-8">
	<!-- 引入 ECharts 文件 -->
	<#--	<script src="echarts.min.js"></script>-->
	<script type="text/javascript" src="${re.contextPath}/plugin/echarts/echarts-4.2.1.min.js" charset="utf-8"></script>
</head>
<style>
	.Right {
		width: 100%;
		overflow-y: scroll;
		left: 16%;
		top: 144px;
	}
	.personnel ul li label {
		display: inline-block;
		width: 12%;
		text-align: right;
	}
	.release .category input, .personnel .category input {
		margin: 10px;
	}
</style>

<body>
<!--头部-->

<!--容器-->
<div class="container clearfix" style="margin-left: 3%;width: 96%;">
	<!--右侧内容-->
	<div class="Right fr mt10">
		<div class="personnel whitebg">
			<ul>
				<li class="clearfix">
					<label class="fl">时间段：</label>
					<div class="ask fl clearfix">
						<input type="text" class="fl" placeholder="选择开始时间" style="width: 128px;" name="gqBeginDate"
							   lay-verify="required"
							   autocomplete="off" id="gqBeginDate" lay-verify="gqBeginDate">
						<span class="fl ml10 mr10">至</span>
						<input type="text" class="fl" placeholder="选择结束时间" style="width: 128px;" name="gqEndDate"
							   lay-verify="required"
							   autocomplete="off" id="gqEndDate" lay-verify="gqEndDate">

					</div>
				</li>
				<hr/>
				<li class="clearfix">
					<label class="fl">业务类型：</label>
					<div class="category clearfix  xmlxdiv">
						<#list xmlx as vo>
							<input type="checkbox" class="fl h15 w25 " name="projectType"
								   value="${vo.badtCode}">
							<span class="fl mr10">${vo.badtName}</span>
						</#list>
					</div>
				</li>
				<hr/>
				<li class="clearfix">
					<label class="fl">项目归属：</label>
					<div class="category clearfix  xmlxdiv">
						<#list xmgs as vo>
							<div style="display: inline-block">
								<input type="checkbox" class="fl h15 w25 doBestInput" name="company"
									   value="${vo.bcId}"
										<#if "${project.mainFzField}"?contains("${vo.bcId}")>
											checked
										</#if>
								>
								<span class="fl mr10">${vo.bcName}</span>
							</div>
						</#list>
					</div>
				</li>
				<hr/>
				<li class="clearfix">
					<label class="fl">项目状态：</label>
					<select id="status" style="width: 100px">
						<option value="">请选择</option>
						<#list xmzt as vo>
							<option value="${vo.badtCode}">${vo.badtName}</option>
						</#list>
					</select>
				</li>
				<li class="clearfix" >
					<div class="fl mt30" style="width:100%;text-align: center">
						<button type="button" class="layui-btn layui-btn-normal" id="analyse"  style="width: 120px;" >开始分析</button>
					</div>
				</li>
			</ul>
		</div>
		<#--		柱状图-->
		<div class="project whitebg" style="text-align: center;">
			<div style="width:100%;height:500px;">
				<div id="main" style="width: 100%;height:500px;"></div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/tabs.js"></script>
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/echarts/js/dituJS/china.js"></script>
<script type="text/javascript">
	var layer;
	var form = layui.form;
	var table = null;
	var tableIns = null;
	var name;
	var number=new Array();
	var citys="南海诸岛";
	//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
	var element = "";
	layui.use(['element','layer','laydate'], function () {
		element = layui.element;layer = layui.layer;laydate = layui.laydate;
		laydate.render({
			elem: '#gqBeginDate',
		});
		laydate.render({
			elem: '#gqEndDate',
		});
		//开始分析
		$("#analyse").click(function (){
			var startTime = $('#gqBeginDate').val();
			var endTime = $('#gqEndDate').val();
			var province = $('#province').val();
			var city = $('#city').val();
			var status=$("#status").val();
			//业务类型
			var arry= new Array();
			$('input[name="projectType"]:checked').each(function(index, element) {
				//追加到数组中
				arry.push($(this).val());
			});
			//将数组元素连接起来转化为字符串
			var projectType = arry.join(',');
			if(!projectType){
				layer.msg('请选择业务类型',{icon:2});return false;
			}
			//项目归属
			var companys = new Array();
			$('input[name="company"]:checked').each(function(index, element) {
				companys.push($(this).val());
			});
			var company = companys.join(',');
			//行业
			var industrys = new Array();
			$('input[name="industry"]:checked').each(function(index, element) {
				industrys.push($(this).val());
			});
			var industry = industrys.join(',');
			var jsondata = {
				startTime:startTime,
				endTime:endTime,
				province:province,
				city:city,
				projectType: projectType,
				company:company,
				industry:industry,
				status:status
			};
			console.log(jsondata);
			layerAjax("/search/analysis/distributions",jsondata,'',function (d){
				var datas=d.data;
				var arr=[];
				var dqcolor='#fff';
				for(var i=0;i<datas.length;i++){
					if(datas[i].num!=0){
						dqcolor='#0f0';
						arr.push({
							name:replace(datas[i].name),
							value:100,
							"color":"#fff"
						})
					}else{
						arr.push({
							name:replace(datas[i].name),
							value:1,
							"color":"#fff"
						})
					}
					//每个地区不同业务类型显示不同颜色
					// if(datas[i].jianli){
					// 	arr.push({
					// 		name:replace(datas[i].jianli),
					// 		value:100,
					// 		"color":"green"
					// 	})
					// 	citys+=replace(datas[i].jianli)+",";
					// }
					// if(datas[i].zixun){
					// 	arr.push({
					// 		name:replace(datas[i].zixun),
					// 		value:100,
					// 		"color":"yellow"
					// 	})
					// 	citys+=replace(datas[i].zixun)+",";
					// }
					// if(datas[i].jiance){
					// 	arr.push({
					// 		name:replace(datas[i].jiance),
					// 		value:100,
					// 		"color":"red"
					// 	})
					// 	citys+=replace(datas[i].jiance)+",";
					// }
					if(datas[i].allCity){
						for(var v = 0;v < datas[i].allCity.length; v++){
							console.log(datas[i].allCity[v].type);
							if("1,2"==datas[i].allCity[v].type){
								arr.push({
									name:replace(datas[i].allCity[v].cityName),
									value:100,//绿黄
									symbol:'image://',
								})
								citys+=replace(datas[i].allCity[v].cityName)+",";
							}else if("1,3"==datas[i].allCity[v].type){
								arr.push({
									name:replace(datas[i].allCity[v].cityName),
									value:100,//红绿
									symbol:'image://',//红绿
									// color:"black"
								})
								citys+=replace(datas[i].allCity[v].cityName)+",";
							}else if("2,3"==datas[i].allCity[v].type){
								arr.push({
									name:replace(datas[i].allCity[v].cityName),
									value:100,//黄绿
									symbol:'image://',
								})
								citys+=replace(datas[i].allCity[v].cityName)+",";
							}else if("1,2,3"==datas[i].allCity[v].type){
								arr.push({
									name:replace(datas[i].allCity[v].cityName),
									value:100,//红绿黄
									symbol:'image://',
								})
								citys+=replace(datas[i].allCity[v].cityName)+",";
							}else if("1"==datas[i].allCity[v].type){

								var image='image://plugin/image/jl.png';
								arr.push({
									name:replace(datas[i].allCity[v].cityName),
									value:100,//绿
									symbol: 'image://'
								})
								citys+=replace(datas[i].allCity[v].cityName)+",";
							}else if("2"==datas[i].allCity[v].type){
								arr.push({
									name:replace(datas[i].allCity[v].cityName),
									value:100,//黄
									symbol: 'image://'
									// color:"yellow"
								})
							}else if("3"==datas[i].allCity[v].type){
								arr.push({
									name:replace(datas[i].allCity[v].cityName),
									value:100,//红
									symbol: 'image://'
									// color:"red"
								})
								citys+=replace(datas[i].allCity[v].cityName)+",";
							}
							// citys+=replace(datas[i].jcCity[v].cityName)+",";
						}
					}
					datas[i].name=replace(datas[i].name);
				}
				if(datas[0].region){
					var dq=datas[0].region.split(',');
					var values=datas[0].values.split(',');
				}

				siging(arr,datas,dq,values,dqcolor);
			})
		})
	});
	$(function(){

		var data = {
		}

		const newVar = [{name: "山东", value: 1},
			{name: "北京", value: 1},
			{name: "天津", value: 1},
			{name: "河北", value: 1},
			{name: "山西", value: 1},
			{name: "内蒙古", value: 1},
			{name: "辽宁", value: 1},
			{name: "吉林", value: 1},
			{name: "黑龙江", value: 1},
			{name: "上海", value: 1},
			{name: "江苏", value: 1},
			{name: "浙江", value: 1},
			{name: "安徽", value: 1},
			{name: "福建", value: 1},
			{name: "江西", value: 1},
			{name: "河南", value: 1},
			{name: "湖北", value: 1},
			{name: "湖南", value: 1},
			{name: "广东", value: 1},
			{name: "广西", value: 1},
			{name: "海南", value: 1},
			{name: "重庆", value: 1},
			{name: "四川", value: 1},
			{name: "贵州", value: 1},
			{name: "云南", value: 1},
			{name: "西藏", value: 1},
			{name: "陕西", value: 1},
			{name: "甘肃", value: 1},
			{name: "青海", value: 1},
			{name: "宁夏", value: 1},
			{name: "新疆", value: 1},
			{name: "台湾", value: 1},
			{name: "香港", value: 1},
			{name: "澳门", value: 1}];
		var dq= newVar;
		var dqcolor='#fff';
		siging(dq,'','','',dqcolor);
	})

	var myChart = echarts.init(document.getElementById('main'));
	// 地图

	function siging(arr,datas,regions,values,dqcolor){
		var mapName = 'china';
		var data1 =arr;
		// console.log(arr);
		var geoCoordMap = {};
		var toolTipData= datas;

		var dqname=regions;
		var dqvalue=values;
		var region=[];
		for (var i = 0; i < dqname.length; i++) {
			region.push({
				name: dqname[i],
				value: dqvalue[i]
			})
		}
		var sdname=["山东"];
		var sdvalue=[200];
		var shandong=[];
		for (var i = 0; i < sdname.length; i++) {
			shandong.push({
				name: sdname[i],
				value: sdvalue[i]
			})
		}

		/*获取地图数据*/
		myChart.showLoading();
		// 获取地图的经纬度--start--------
		var mapFeatures = echarts.getMap(mapName).geoJson.features;
		myChart.hideLoading();
		mapFeatures.forEach(function (v) {
			// 地区名称
			var name = v.properties.name;
			// 地区经纬度
			geoCoordMap[name] = v.properties.cp;

		});
		var mapFeaturesss = echarts.getMap("chinacity").geoJson.features;
		mapFeaturesss.forEach(function (v) {
			// 地区名称
			var name = v.properties.name;
			// 地区经纬度
			geoCoordMap[name] = v.properties.cp;
		});


		var max = 480,
				min = 9; // todo
		var maxSize4Pin = 100,
				minSize4Pin = 20;
        // 将 data{name,value} 转换成  name ,clour,经纬度--value
		var convertData = function (data) {
			var res = [];
			for (var i = 0; i < data.length; i++) {
				var geoCoord = geoCoordMap[data[i].name];
				if (geoCoord) {
					res.push({
						name: data[i].name,
						value: geoCoord.concat(data[i].value),
						symbol:data[i].symbol,
                        color:data[i].color
					});
				}
			}
			return res;
		};
		option = {
			tooltip: {
				padding: 0,
				enterable: true,
				transitionDuration: 1,
				textStyle: {
					color: '#000',
					decoration: 'none',
				},
				// position: function (point, params, dom, rect, size) {
				//   return [point[0], point[1]];
				// },
				formatter: function (params) {
					 // console.log(params)
					var tipHtml = '';
					//鼠标放在城市名上不展示内容
					if(params.name=='北京'||params.name=='天津'||params.name=='重庆'||params.name=='上海'||params.name=='台湾'||params.name=='香港'||params.name=='澳门'){
						if(toolTipData){
							tipHtml = '<div style="width:300px;height:180px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7);text-align: left">'
									+ '<div style="width:260px;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 20px">' + '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:40px;">' + '</i>'
									+ '<span style="margin-left:10px;color:#fff;font-size:16px;">' + params.name + '</span>' + '</div>'
									+ '<div style="padding:20px">';
							if (content(params.name, toolTipData)) {//省份没有项目不展示
								tipHtml = tipHtml + content(params.name, toolTipData);
							}
							// setTimeout(function() {
							// 	tooltipCharts(params.name);ss
							// }, 10);
						}
					}else if(citys.indexOf(params.name)<0){
						if(toolTipData){
							tipHtml = '<div style="width:300px;height:180px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7);text-align: left">'
									+ '<div style="width:260px;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 20px">' + '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:40px;">' + '</i>'
									+ '<span style="margin-left:10px;color:#fff;font-size:16px;">' + params.name + '</span>' + '</div>'
									+ '<div style="padding:20px">';
							if (content(params.name, toolTipData)) {//省份没有项目不展示
								tipHtml = tipHtml + content(params.name, toolTipData);
							}
							// setTimeout(function() {
							// 	tooltipCharts(params.name);ss
							// }, 10);
						}
					}
					return tipHtml;
				}

			},
			geo: {

				show: true,
				map: mapName,
				roam: true,
				zoom: 1,
				center: [113.83531246, 34.0267395887],
				// show: true,
				// map: mapName,
				// roam: false,
				// zoom: 1,
				// center: [113.83531246, 34.0267395887],
				label: {
					emphasis: {
						show: false
					}
				},
				label: {
					normal: {
						show: false
					},
					emphasis: {
						show: false,
					}
				},
				roam: true,
				itemStyle: {
					normal: {
						areaColor: '#023677',
						borderColor: '#1180c7',
					},
					emphasis: {
						areaColor: '#4499d0',
					}
				}
			},
			series: [{
				name: '散点',
				type: 'scatter',
				coordinateSystem: 'geo',
				data: convertData(data1),
				symbolSize: function (val) {
					return val[2] / 10;
				},
				label: {
					normal: {
						formatter: '{b}',
						position: 'right',
						show: true
					},
					emphasis: {
						show: true
					}
				},
				itemStyle: {
					normal: {
						color:  function(e){
							var color='#fff';
							if(e.data.color){
								var color=  e.data.color;
							}
                            return color;
                        }
					}
				},
			},
				{
			/*		type: 'map',
					map: mapName,
					geoIndex: 0,
					aspectScale: 0.75, //长宽比
					showLegendSymbol: false, // 存在legend时显示*/

					type: 'map',
					zoom: 1,
					map: mapName,
					geoIndex: 0,
					aspectScale: 0.75, //长宽比
					showLegendSymbol: false, // 存在legend时显示*/
					label: {
						normal: {
							show: true
						},
						emphasis: {
							show: false,
							textStyle: {
								color: '#fff'
							}
						}
					},
					roam: true,
					itemStyle: {
						normal: {
							areaColor: '#031525',
							borderColor: '#3B5077',
						},
						emphasis: {
							areaColor: '#2B91B7'
						}
					},
					animation: false,
					data: data1
				},
				{ //总公司用五角星标注
					type: 'scatter',
					coordinateSystem: 'geo',
					label: {
						normal: {
							show: false,
							color: '#fff',
							fontWeight: 'bold',
							formatter: function(para) {
								return '{cnNum|' + para.data.value[2] + '}'
							},
							rich: {
								cnNum: {
									fontSize: 13,
									color: '#D4EEFF',
									left: 'center'
								},
							}
						},
					},
					symbol: 'image://',
					symbolSize: [30, 30],
					z: 999,
					data: convertData(shandong),
				},
				{ //分公司用红旗标注
					type: 'scatter',
					coordinateSystem: 'geo',
					label: {
						normal: {
							show: false,
							color: '#fff',
							fontWeight: 'bold',
							formatter: function(para) {
								return '{cnNum|' + para.data.value[2] + '}'
							},
							rich: {
								cnNum: {
									fontSize: 13,
									color: '#D4EEFF',
									left: 'center'
								},
							}
						},
					},
					symbol:'path://M54.227,12.611c-0.338-0.336-0.736-0.505-1.196-0.505c-0.229,0-0.712,0.188-1.446,0.559  c-0.735,0.372-1.515,0.786-2.336,1.248c-0.823,0.459-1.797,0.875-2.921,1.247c-1.123,0.371-2.163,0.559-3.12,0.559  c-0.884,0-1.664-0.168-2.336-0.505c-2.229-1.044-4.168-1.823-5.814-2.337c-1.646-0.513-3.416-0.771-5.311-0.771  c-3.272,0-6.999,1.064-11.177,3.188c-0.862,0.43-1.48,0.763-1.88,1.007l-0.397-2.911c0.897-0.779,1.476-1.914,1.476-3.195  c0-2.347-1.902-4.249-4.249-4.249c-2.347,0-4.249,1.902-4.249,4.249c0,1.531,0.818,2.862,2.032,3.61l5.74,42.09  c0.171,1.253,1.243,2.162,2.474,2.162c0.112,0,0.226-0.007,0.341-0.022c1.368-0.188,2.326-1.447,2.139-2.815L19.69,38.303  c4.186-2.077,7.807-3.124,10.853-3.124c1.293,0,2.554,0.193,3.783,0.583c1.23,0.391,2.253,0.815,3.067,1.274  c0.814,0.46,1.775,0.886,2.88,1.274c1.107,0.39,2.2,0.585,3.279,0.585c2.726,0,5.991-1.027,9.796-3.08  c0.478-0.248,0.828-0.492,1.049-0.731c0.221-0.239,0.332-0.579,0.332-1.021V13.806C54.729,13.347,54.562,12.948,54.227,12.611z',
					symbolSize: [15, 15],
					z: 999,
					color:'red',
					data: convertData(region),
				},{
					type: "map",
					map: name,
					// center: [104.114129, 37.550339],//当前视角的中心点
					zoom: 1, //当前视角的缩放比例
					roam: true, //是否开启平游或缩放
					scaleLimit: { //滚轮缩放的极限控制
						min: 1,
						max: 2
					},
				}

			]
		};

		var index = 0; //播放所在下标
		myChart.dispatchAction({
			seriesIndex: 0,
			dataIndex: index
		});
		index++;
		if (index >= option.series[0].data.length) {
			index = 0;
		}

		myChart.on('mouseover', function (params) {
			// console.log(params)
			myChart.dispatchAction({
				type: 'showTip',
				seriesIndex: 0,
				dataIndex: params.dataIndex,
			});
		});
		myChart.setOption(option);
	}
	function content(name,arr){
		var label;
		for(var i=0;i<arr.length;i++){
			if(arr[i].name===name){
				label='<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' + '</i>'
						+ '项目数：' + '<span style="color:#11ee7d;margin:0 6px;">' + arr[i].num + '</span>' + '个' + '</p>'
						+ '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' + '</i>'
						+ '总合同额：' + '<span style="color:#f48225;margin:0 6px;">' + arr[i].money+ '</span>' + '元' + '</p>'
				if(arr[i].jl!=null){
					label+='<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' + '</i>'
							+ '监理项目数/合同金额：' + '<span style="color:#f4e925;margin:0 6px;">' + arr[i].jl.num+'</span>'+'个'+'<span style="color:#f4e925;margin:0 6px;">'+arr[i].jl.htMoney + '</span>' + '元' + '</p>';
				}
				if(arr[i].zx!=null){
					label+='<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' + '</i>'
							+ '咨询项目数/合同金额：' + '<span style="color:#f4e925;margin:0 6px;">' + arr[i].zx.num+'</span>'+'个'+'<span style="color:#f4e925;margin:0 6px;">'+arr[i].zx.htMoney + '</span>' + '元' + '</p>';
				}
				if(arr[i].jcs!=null){
					label+='<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' + '</i>'
							+ '检测项目数/合同金额：' + '<span style="color:#f4e925;margin:0 6px;">' + arr[i].jcs.num+'</span>'+'个'+'<span style="color:#f4e925;margin:0 6px;">'+arr[i].jcs.htMoney + '</span>' + '元' + '</p>';
				}
				// if(arr[i].qt!=null){
				// 	label+='<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' + '</i>'
				// 			+ '其他项目数/合同金额：' + '<span style="color:#f4e925;margin:0 6px;">' + arr[i].jl.num+'</span>'+'个'+'<span style="color:#f4e925;margin:0 6px;">'+arr[i].jl.htMoney + '</span>' + '元' + '</p>';
				// }

				return label;
			}
		}
	}
	function replace(name){
		name=name.replace("省",'');
		name=name.replace('市','');
		name=name.replace('自治区','');
		name=name.replace('特别行政区','');
		name=name.replace('回族','');
		name=name.replace('维吾尔','');
		name=name.replace('壮族','');
		name=name.replace('城区','');
		return name;
	}
</script>

</body>

</html>
